/*------------ Desktop Style Menü Links Menu ----------------*/
/*------------ Desktop Style Menü Links Menu ----------------*/
@media (max-width:980px) {
	#main-menu-links-AF {
		width: calc(14%);
		max-width: 400px; /* Tippfehler von "400x" behoben */
		/*margin-left: calc((100% / 2) - (970px / 2));*/
		margin-right: 100px;

		background-color: #990033;
		position: relative;   /* wichtig für z-index */
		z-index: 1000;        /* Menü liegt immer vorne */
		overflow: visible;    /* Unterpunkte dürfen rausgucken */
	}

	/* Clearfix, damit Hintergrund sichtbar bleibt */
	#main-menu-links-AF::after {
		content: "";
		display: table;
		clear: both;
	}

	/* Menü Schrift */
	.AF_Liks_Menu ul.level_1 li a {
		display: block;
		text-align: center;
		text-decoration: none;
		color: #fff;
	}

	/* Hover/Fokus Schrift Hauptmenü */
	.AF_Liks_Menu ul.level_1 li:hover a,
	.AF_Liks_Menu ul.level_1 li:active a,
	.AF_Liks_Menu ul.level_1 li:focus a {
		color: #FFF;
	}

	/* Hauptmenü-Elemente (Bezugssystem) */
	.AF_Liks_Menu ul.level_1 li {
		float: left;
		display: block;
		margin: 0 4px 3px;
		padding: 5px 10px;
		position: relative; /* Untermenü hängt an diesem LI */
	}

	/* Untermenü (Level 2) → rechts neben dem Hauptpunkt */
	.AF_Liks_Menu ul.level_2 {
		width: 160px;
		position: absolute;
		top: 0;        /* gleiche Höhe wie Hauptpunkt */
		left: 100%;    /* direkt rechts daneben */

		opacity: 0;
		visibility: hidden;
		transform: translateX(10px); /* kleiner Slide nach rechts */
		transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0.3s;
		z-index: 1100;

		padding: 4px;
		margin: 0;
	}

	/* Sichtbar bei Hover */
	.AF_Liks_Menu ul.level_1 li:hover > ul.level_2,
	.AF_Liks_Menu ul.level_1 li:focus > ul.level_2 {
		opacity: 1;
		visibility: visible;
		transform: translateX(0);
		transition-delay: 0s; /* sofort sichtbar werden */
	}

	/* Untermenü-Elemente */
	.AF_Liks_Menu ul.level_2 li {
		width: 100%;
		margin: 0;
		padding: 2px 0;
		background-color: rgba(153,0,51, 0.8);
	}

	/* Untermenü Links */
	.AF_Liks_Menu ul.level_2 li a {
		display: block;
		padding: 3px 0 3px 5px;
		text-align: left;
		color: #fff;
	}

	.AF_Liks_Menu ul.level_2 li a:hover,
	.AF_Liks_Menu ul.level_2 li a:active,
	.AF_Liks_Menu ul.level_2 li a:focus {
		border-radius: 5px;
		color: #000;
		background-color: rgba(252,252,252,.6);
	}
}